<script lang="tsx">
/**
 * 灵感絮语（论坛）
 */
export default {
  name: "time-imprint"
}
</script>

<script lang="tsx" setup>
import {onMounted, ref} from "vue";
import {processRequest} from "anqin-framework";

/**
 * 挂载时运行
 */
onMounted(() => {
  getList()
  centerCurrentItem();
  window.addEventListener('resize', centerCurrentItem);
})

/**
 * 获取数据
 */
const dataList: any = ref([])
const currentIndex = ref(3);
const getList = async () => {
  const result = await processRequest.get("/api/BlogDevelopHistory", {
    pageSize: 9999
  })
  dataList.value = result.dataList
}

/**
 * 计算当前位置
 */
const viewport: any = ref(null);
const translateX = ref();
const centerCurrentItem = () => {
  if (!viewport.value) return;
  const viewportWidth = viewport.value.offsetWidth;
  const itemWidth = 90 + 60; // 项目宽度 + 间距
  translateX.value = -((currentIndex.value * itemWidth) - (viewportWidth / 2) + (itemWidth / 2)) + 30;
}

/**
 * 当前选中
 */
const setCurrent = (index: number) => {
  currentIndex.value = index;
  centerCurrentItem();
}

/**
 * 上一个
 */
const scrollToPrev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    centerCurrentItem();
  }
}

/**
 * 下一个
 */
const scrollToNext = () => {
  if (currentIndex.value < dataList.value.length - 1) {
    currentIndex.value++;
    centerCurrentItem();
  }
}
</script>

<template>
  <div class="time-imprint">
    <div class="team-member"></div>
    <div class="development-history">
      <div class="history-header">
        <div class="title">发展历程</div>
      </div>
      <div class="history-body">
        <div class="history-container">
          <div :class="{'container-button-disabled':currentIndex === 0}" class="container-button" @click="scrollToPrev">
            <img alt="" class="button-logout" src="/image/icon/icon-left.svg">
          </div>
          <div ref="viewport" class="timeline-viewport">
            <div :style="{ transform: `translateX(${translateX}px)` }" class="timeline">
              <div
                  v-for="(item, index) in dataList"
                  :key="item.id"
                  :class="{ active: currentIndex === index }"
                  class="timeline-item"
                  @click="setCurrent(index)"
              >
                <div class="year-marker">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
          <div :class="{'container-button-disabled':currentIndex === dataList.length - 1}" class="container-button"
               @click="scrollToNext">
            <img alt="" class="button-logout" src="/image/icon/icon-right.svg">
          </div>
        </div>
        <div class="history-content">
          <div class="title">{{ dataList[currentIndex]?.name }}</div>
          <div class="content">{{ dataList[currentIndex]?.introduce }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>